<template>
    <div class="act-dt-box">
        <div class="myCardFragmentBox" v-if="type==2">
            <div class="fgbg" v-if="dtData.cardId">
                <fragmen-union :styleType="2" :id="'yy'+dtData.cardId" :fragmentNoList="item.viewStatus==5?[]:fragmentNoList" :cardUrl="dtData.cardImg"/>
                <div class="fgbtn fgbtn2" v-if="item.viewStatus==3">Forging</div>
                <div class="fgbtn fgbtn2" v-else-if="item.viewStatus==5">Forged</div>
            </div>
        </div>
        <div class="card-img-box" v-else>
            <Image :url="dtData.cardImg"/>
        </div>
        <div class="cart-dt-right-con">
            <h4 class="title">{{dtData.cardName}}</h4>
            <div class="introduce">{{dtData.cardDesc}}</div>
            <div class="ownerBox">
                <div class="owner-top">
                    <div class="owner-top-img-box">
                        <Image :url="dtData.authorHeadImg"/>
                    </div>
                    <div class="owner-top-txt">
                        <h5>{{dtData.authorName || '--'}}</h5>
                        <p>{{dtData.authorProfile}}</p>
                    </div>
                </div>
                <div class="jzfx">
                    <h5>Work value analysis</h5>
                    <p>{{dtData.valueAnalysis}}</p>
                </div>
            </div>
            <!-- <div class="cklxxx" v-if="dtData.bornId">
                <my-button :styleType="2" @click="showFlag=true">View Information On The Chain</my-button>
                <my-dailog v-model:show="showFlag" :styleType="3" :showtopclose="true">
                    <div class="propVisitsDgWrap" v-if="chainInfo">
                        <div class="propDgTitle">Chain Information</div>
                        <div class="propVisitsDgMain">
                            <chain-info :info="chainInfo"/>
                        </div>
                    </div>
                </my-dailog>
            </div> -->
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Image from '@/components/image.vue'
import fragmenUnion from '@/components/fragmenUnion.vue'
import myButton from '@/components/myButton.vue'
import chainInfo from '@/components/chainInfo.vue'
import myDailog from '@/components/myDailog.vue'
export default {
    components:{
       Image,
       fragmenUnion,
       myButton,
       myDailog,
       chainInfo
    },
    props:{
        item:Object,
        id:Number,
        type:Number,
        fragmentList:{
            type:Array,
            default:[]
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            dtData:{},
            fragmentNoList:[],
            showFlag:false,
            chainInfo:''
        })

        onMounted(()=>{
            state.fragmentNoList = []
            props.fragmentList.forEach(item => {
                state.fragmentNoList = [...state.fragmentNoList,item.fragmentNo]
            });
            if(props.id){
                store.dispatch('activity/get_card_detail',props.id).then(res=>{
                    state.dtData = res.data
                    if(res.data.bornId){ // 获取链上信息
                        store.dispatch('activity/get_card_chain_info',props.id).then(res =>{
                            const cdata = res.data || {}
                            if(res.success && res.data){
                                state.chainInfo = {
                                    ownerName:cdata.receiveUserName || '',
                                    ownerSuccessTime:cdata.receiveTime || '',
                                    chainName:cdata.chainName || '',
                                    tokenId:cdata.tokenId || '',
                                    contractAddress:cdata.contractAddress || '',
                                    tokenStandard:cdata.tokenStandard || ''
                                }
                            }else{
                                state.chainInfo = ''
                            }
                        })
                    }
                })
            }
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .act-dt-box{
        display: flex;
        height: 100%;
        width: 100%;
        padding: 20px 30px 20px 20px;
        overflow: hidden;
        .myCardFragmentBox{
            .fgbg{
                position: relative;
                z-index: 10;
                background: rgba(0, 0, 0, 0.5);
                border-top-right-radius: 50px;
                border-bottom-left-radius: 50px;
                padding: 30px;
                .fgbtn{
                    position: absolute;
                    z-index: 15;
                    left: 50%;
                    top: 50%;
                    width: 150px;
                    height:60px;
                    line-height: 60px;
                    background: url(/images/wc/dz1.png) left top no-repeat;
                    background-size: 100% 100%;
                    font-size: 24px;
                    color: #fff;
                    text-align: center;
                    font-family: Inter-Medium, Inter;
                    font-weight: 500;
                    margin: -30px 0 0 -75px;
                    &.fgbtn2{
                        background-image: url(/images/wc/dz2.png)
                    }
                }
            } 
        }
        .card-img-box{
            height: 100%;
            width: 500px;
            max-height: 560px;
            background: rgba(0, 0, 0, 0.5);
            border-top-right-radius: 50px;
            border-bottom-left-radius: 50px;
            padding: 30px;
        }
        .cart-dt-right-con{
            flex: 1;
            width: 100%;
            height: 100%;
            padding: 0 0 0 20px;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: #FFFFFF;
            overflow: auto;
            font-size: 22px;
            line-height: normal;
            flex-shrink: 0;
            .title{
                line-height: normal;
                font-family: Poppins-SemiBold, Poppins;
                font-weight: 600;
                color: #FFFFFF;
                font-size: 28px;
            }
            .introduce{
                padding: 10px 0 30px 0;
                line-height: 40px;
            }
            .ownerBox{
                width: 100%;
                background: rgba(44,91,169,0.5);
                border: 1px solid rgba(103,248,255,0.5);
                padding: 20px;
                font-size: 22px;
                .owner-top{
                    display: flex;
                    border-bottom:1px solid rgba(103,248,255,0.2);
                    padding: 0 0 20px 0;
                    .owner-top-img-box{
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    .owner-top-txt{
                        flex: 1;
                        padding: 0 0 0 15px;  
                    }
                }
                .jzfx{
                    padding: 20px 0 10px 0;
                }
                h5{
                    font-size: 28px;
                    font-weight: 700px;
                    padding: 0;
                    margin: 0;
                }
                p{
                    font-size: 22px;
                    color: #93A4C7;
                    line-height: 40px;
                }
            }
            .cklxxx{
                width: 490px;
                margin: 30px 0;
            }
        }
    }
</style>